<template>
	<view class="flex m-b30">
		<view class="flex flex-1" @click="open">
			<text class="text-700-130">{{ selectedCity }}</text>
			<image class="square-30 m-l14" src="@/static/images/home/location-1.png"></image>
		</view>

		<view class="input-view flex p-h16">
			<image class="square-48" src="@/static/images/public/search.png"></image>
			<text class="p-h10 text-500-428">请输入关键词/职位</text>
		</view>
		
		<up-picker
		  ref="pickerRef"
		  title="选择城市"
		  :show="show"
			closeOnClickOverlay
		  :columns="[columns]"
		  @confirm="onConfirm"
		  @cancel="close" @close="close" />
	</view>
</template>

<script lang="ts" setup>
	import { useHomeLocationPicker } from '@/hooks/use-home-location'
	
	const {
	  pickerRef,
	  selectedCity,
	  columns,
	  show,
	  open,
	  close,
	  onConfirm,
	} = useHomeLocationPicker()
</script>

<style lang="scss" scoped>
	.input-view {
		width: 570rpx;
		height: 74rpx;
		border-radius: 20rpx;
		background-color: $bg-color-1;
		border: 1rpx solid $border-color-1;
	}
</style>